<template>
  <!--  导航栏-->
  <Navbar/>
  <!-- 返回键 -->
  <button class="btn btn-outline-primary btn-lg" @click="goback(aComponent)">◀ Go Back</button>

  <!--  这里用来显示当前组件信息,后续删除-->
<!--  <h3>{{aComponent.currentTabComponent.__file}}</h3>-->
<!--  <h3>{{aComponent.tag}}</h3>-->
  <hr>
  <!--  这里用来测试最新代码或更新的组件-->
<!--  <button @click="playVideo(videoId,true)">切换组件</button>-->
<!--  <input v-model="videoId" type="number">-->
  <!--  动态组件,根据标签等内容切换-->
  <component :is="aComponent.currentTabComponent"></component>
  <!--  使用全局的脚注,不用自己引入-->
<!--  <Footer/>-->
</template>

<!--重构代码,使用setup语法糖,对代码进行相对的精简-->
<script setup lang="ts">
// vue相关的各个基本组件
import {inject, provide, reactive, ref, shallowRef} from "vue";

// 引入bootstrap框架
// import "bootstrap/dist/css/bootstrap.min.css"
// import "bootstrap"

// 引入子级组件
// 引入的子级组件是以变量的形式而非字符串
import Navbar from "@/components/Navbar.vue";
import Footer from "@/components/Footer.vue";
import Home from "@/components/Home.vue";
import VideoPlay from "@/components/VideoPlay.vue";
import Child from "@/components/Child.vue";
import SearchList from "@/components/SearchList.vue";
// import Upload from "@/components/Upload.vue";
// import PersonalPage from "@/components/PersonalPage.vue";
import PersonalPage from "@/components/PersonalPage.vue";
// import Favorites from "@/components/Favorites.vue";
// import History from "@/components/History.vue";

// 引入定义的IComponent接口,用于相关数据的实现
import {IComponent} from "@/types/AllData";

// 引入自定义hook函数
import useChangeComponent from "@/hooks/useChangeComponent";
import useGetRequest from "@/hooks/useGetRequest";
import goback from "@/hooks/goback";

// 动态组件相关-------begin------------------
// 定义一个变量存储需要的各个动态组件,默认主页
let obj:IComponent = {
  currentTabComponent: shallowRef(Home),
  tag:''
}
let aComponent = reactive(obj)
// aComponent = useChangeComponent(aComponent,Home);
// 定义一个方法,切换各个动态组件,根据组件的名字
const changeComponent = (componentName:any,componentTag?:string) =>{
  useChangeComponent(aComponent,componentName,componentTag)
}
// 通过provide实现组件间通信
provide('aComponent',aComponent) //定义响应式动态组件信息
provide('changeComponent',changeComponent) //切换动态组件的名字,方法
// 动态组件相关-------end------------------

const prefix:string|undefined = inject('prefix');
const prefix2:string|undefined = inject('prefix2');

const videoId=ref(16)
provide("videoId",videoId)
const uuid=ref(0)

//播放视频
const playVideo=(id:number,i:boolean)=>{
  videoId.value=id
  if (i)
    changeComponent(VideoPlay)
}
provide('uuid',uuid)
provide("playVideo",playVideo)

//查看其他用户信息
const userId=ref(0)
const seeInfo=(id:number)=>{
  userId.value=id
  changeComponent(PersonalPage)
}
provide('userId',userId)
provide('seeInfo',seeInfo)

//搜索视频
const searchWord=ref<string|null>(null)
const searchTag=ref<number|null>(null)
const search=(word?:string,tag?:number)=>{
  searchWord.value=word?word:null
  searchTag.value=tag?tag:null
  changeComponent(SearchList)
}
provide('searchWord',searchWord)
provide('searchTag',searchTag)
provide('search',search)

</script>

<style scoped>

</style>